<style lang="less" scoped>
  .page__wrapper {
    width: 100%;
    height: 100%;
    .uploader {
      display: inline-block;
      margin-left: 10px;
    }
  }
</style>
<template>
  <div class="page__wrapper">
    <simple-table :table-column="tableColumn" :table-data="tableData" @sort-change='handleSortChange' :table-page-info="tablePageInfo" :table-data-count="tableDataTotalCount" @page-info-change="handlePageInfoChange">
      <template slot="searchSection">
        <simple-form v-model="searchModel" :form-field="searchFormField">
          <template slot="tableOperation">
            <el-button @click="handleDataSearch">{{$t('operation.search')}}</el-button>
            <el-button type="primary" @click="handleAddClick">{{$t('operation.create')}}</el-button>
            <el-button type="primary" @click="handleExpTmplClick">{{$t('operation.downloadTemplate')}}</el-button>
            <el-button type="primary" @click="handleShowLog">{{$t('operation.importLog')}}</el-button>
            <!-- 导入 -->
            <el-upload class="uploader" :on-change="importOnChange" ref="upload" :action="importUrl" :auto-upload="false" :show-file-list="false">
              <el-button slot="trigger" type="primary">{{$t('operation.import')}}</el-button>
            </el-upload>
          </template>
        </simple-form>
      </template>
      <template slot-scope="scope" slot="quarter">
        {{$getDictLabel({type: 'quarter', value: scope.row.quarter})}}
      </template>
      <template slot="operation" slot-scope="scope">
        <el-button circle icon="el-icon-search" :title="$t('operation.view')" @click="handleViewClick(scope.row)"></el-button>
        <el-button circle icon="el-icon-edit" :title="$t('operation.edit')" @click="handleEditClick(scope.row)"></el-button>
        <el-button @click="deleteRecord(scope.row)" circle icon="el-icon-delete" :title="$t('operation.delete')"></el-button>
      </template>
    </simple-table>
    <detail-dialog :show-flag.sync="isShowDetailDialog" :detail-data="rowData" :view-flag="isViewFlag"></detail-dialog>
    <importlog-dialog :show-flag.sync="isShowImportlogDetailDialog"></importlog-dialog>
  </div>
</template>
<script>

/** 混入分页信息及数据总数信息 */
import pageMixins from '@/components/base/simple-table/page-mixins'
import detailDialog from './detail'
import importlogDialog from './importlogDetail'
import utils from '@/utils/index'
const BASEURL = {
  list: '/api/business/balancesheet/demoBalanceSheet/list',
  delete: '/api/business/balancesheet/demoBalanceSheet/delete',
  import: '/api/business/balancesheet/demoBalanceSheet/import',
  template: '/api/business/balancesheet/demoBalanceSheet/template'

}
export default {
  name: 'debt_balance',
  mixins: [pageMixins],
  components: { detailDialog, importlogDialog },
  data () {
    return {
      searchModel: { accountPeriod: '2019', quarter: '1' },
      /** 表格数据 */
      tableData: [],
      rowData: {},
      /** 是否显示详情页 dialog */
      isShowDetailDialog: false,

      isShowImportlogDetailDialog: false,
      /** 是否为查看数据 */
      isViewFlag: false,
      importUrl: BASEURL.import
    }
  },
  computed: {
    searchFormField () {
      return [
        { prop: 'accountPeriod', label: this.$t('debt_balance.accountPeriod'), type: 'Datepicker', component: { type: 'year', valueFormat: 'yyyy', clearable: true } },
        { prop: 'quarter', label: this.$t('debt_balance.quarter'), type: 'Select', component: { optionList: this.quarter, clearable: true } },
        { slotName: 'tableOperation', col: { xs: 12, sm: 16, md: 12, style: { textAlign: 'right' } }, labelWidth: '0' }
      ]
    },
    tableColumn () {
      return [
        { label: this.$t('debt_balance.company'), prop: 'company.name', width: 160 },
        { label: this.$t('debt_balance.totalAmount'), prop: 'totalAmount', width: 150, sortable: 'custom' },
        { label: this.$t('debt_balance.receivableAmount'), prop: 'receivableAmount', sortable: 'custom', width: 250 },
        { label: this.$t('debt_balance.occupyAmount'), prop: 'occupyAmount', sortable: 'custom', width: 270 },
        { label: this.$t('debt_balance.liabilityAmount'), prop: 'liabilityAmount', sortable: 'custom', width: 160 },
        { label: this.$t('debt_balance.payAmount'), prop: 'payAmount', sortable: 'custom', width: 190 },
        { label: this.$t('debt_balance.netAssetsAmount'), prop: 'netAssetsAmount', sortable: 'custom', width: 140 },
        { label: this.$t('debt_balance.debtRatio'), prop: 'debtRatio', sortable: 'custom', width: 140 },
        { label: this.$t('debt_balance.accountPeriod'), prop: 'accountPeriod', sortable: 'custom', minWidth: 120 },
        { label: this.$t('debt_balance.quarter'), slotName: 'quarter', prop: 'quarter', sortable: 'custom', minWidth: 120 },
        { label: this.$t('field.operation'), slotName: 'operation', width: 100, fixed: 'right' }
      ]
    },
    quarter () {
      return this.$getDictList('quarter')
    }
  },
  /**
   * 注入到子组件
   */
  provide () {
    return { handleDataSearch: this.handleDataSearch }
  },
  methods: {
    handleDataSearch () {
      let searchFilter = Object.assign({}, { page: this.tablePageInfo }, this.searchModel)
      let loadingFlag = this.$loading({ fullscreen: false, target: this.$el, text: this.$t('tip.systemLoading') })
      this.$axios
        .post(BASEURL.list, searchFilter)
        .then(resp => {
          let respData = resp.data
          this.tableData = respData.list
          this.tablePageInfo = { pageNo: respData.pageNo, pageSize: respData.pageSize }
          this.tableDataTotalCount = respData.count
        })
        .finally(() => {
          loadingFlag.close()
        })
    },
    handleAddClick () {
      this.rowData = {}
      this.isViewFlag = false
      this.isShowDetailDialog = true
    },
    importOnChange (file) {
      let loadingFlag = this.$loading({ fullscreen: false, target: this.$el, text: this.$t('tip.systemLoading') })
      let formData = new FormData()
      formData.append('file', file.raw)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post(this.importUrl, formData, config)
        .then((resp) => {
          this.handleDataSearch()
        })
        .finally(res => {
          loadingFlag.close()
        })
    },
    handleExpTmplClick () {
      utils.fileExportAs(BASEURL.template, {}, '资产负债导入模板.xlsx')
    },

    /** 查看导入日志 */
    handleShowLog () {
      this.isShowImportlogDetailDialog = true
    },
    handleSortChange (sortInfo) {
      this.tablePageInfo.orderBy = sortInfo.prop
      this.tablePageInfo.orderSort = (sortInfo.order === 'ascending' ? 'asc' : 'desc')
      this.handleDataSearch()
    },
    handleViewClick (row) {
      this.rowData = this.$_.cloneDeep(row)
      this.isViewFlag = true
      this.isShowDetailDialog = true
    },
    handleEditClick (row) {
      this.rowData = this.$_.cloneDeep(row)
      this.isViewFlag = false
      this.isShowDetailDialog = true
    },
    deleteRecord (row) {
      this.$msgbox({
        title: this.$t('tip.warning'),
        message: this.$t('tip.confirmDelete'),
        type: 'warning',
        showCancelButton: true,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            this.$axios
              .post(BASEURL.delete, { id: row.id })
              .then(resp => {
                this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
                done()
              })
              .finally(() => {
                instance.confirmButtonLoading = false
              })
          } else done()
        }
      })
        .then(() => {
          this.handleDataSearch()
        })
    }
  },
  mounted () {
    this.handleDataSearch()
  }
}
</script>
